<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>音乐播放器</title>
    <!-- player.css -->
    <link rel="stylesheet" href="./css/player.css" />
  </head>

  <body>
    <!--播放器-->
    <div id="player">
      <!--播放控件-->
      <div id="playerControl">
        <!-- 图片 -->
        <div class="playerImg">
          <!-- 图片 -->
          <img
            src="./images/1.jpg"
            alt=""
            width="150"
            height="150"
            id="mypic"
          />
          <!-- 音乐 -->
          <audio id="audio" src="./video/1.mp3"></audio>
        </div>

        <!-- 控制按钮 -->
        <div id="pcontrol" class="clearfix">
          <button id="prev" class="prev" title="上一曲"></button>
          <button id="play" class="play1" title="播放"></button>
          <button id="next" class="next" title="下一曲"></button>
          <button id="stop" class="stop" title="停止"></button>
        </div>
      </div>

      <!--播放进度-->
      <div id="progrees">
        <div id="curProgrees"></div>
      </div>

      <!--播放时间-->
      <div id="playTime">
        <span id="presentTime">00:00</span>
        <span>/</span>
        <span id="totalTime">00:00</span>
      </div>

      <!--音乐列表-->
      <div id="playerList">
        <ul>
          <li class="active">
            <span class="mr10">1</span>
            <span>Mascara</span>
            <span>-</span>
            <span>G.E.M. 邓紫棋</span>
          </li>
          <li>
            <span class="mr10">2</span>
            <span>西安人的歌</span>
            <span>-</span>
            <span>范炜与程渤智</span>
          </li>
          <li>
            <span class="mr10">3</span>
            <span>往后余生</span>
            <span>-</span>
            <span>李贰叁</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 引入播放功能核心JS -->
    <script src="./js/palyer.js"></script>
  </body>
</html>
